<template>
	<view class="conpage">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="使用记录" @clickLeft="back"/>
		<view class="title">
			<text>{{sysInfo.buildingName}}</text>
			<text style="margin: 0 8px;">—</text>
			<text>{{sysInfo.labName}}</text>
		</view>
		<scroll-view scroll-y class="scroll-content" style="height: calc(100% - 115px);overflow-y: auto;marginTop: 0px" >
			<view v-for="(e,index) in dataList" style="width: 100%;">
				<view class="dateSty">{{e.date}}</view>
				<scroll-view scroll-x scroll-y class="scroll-content scroll" @touchmove.stop>
					<uni-table class="tableshadow" style="margin: 4px 0 20px 0" emptyText="暂无更多数据">
							<!-- 表格数据行 -->
							<uni-tr class="tableHead" v-for="(item,index) in dataListName" :key="'dataListName'+index">
								<uni-td>
									<span>{{item.demo1}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo2}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo3}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo4}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo5}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo6}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo7}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.demo8}}</span>	
								</uni-td>
							</uni-tr>
							<uni-tr :class="item.warringInfo=='使用量超标'|| item.fbillstatestr=='未批准' ? 'redColor': '' " v-for="(item,index) in e.list" :key="index">
								<uni-td>
									<span>{{item.fgoodname}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fgoodno}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fretqty}}</span>	
								</uni-td>
								<uni-td>
									<span :class="item.warringInfo=='使用量超标' ? 'itemColor': ''">{{item.fuseqty}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fusedatestr}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fuseusername}}</span>	
								</uni-td>
								<uni-td>
									<span>{{item.fbillno}}</span>	
								</uni-td>
								<uni-td :class="item.fbillstatestr=='未批准' ? 'itemColor': ''">
									<span>{{item.fbillstatestr}}</span>	
								</uni-td>
							</uni-tr>
					</uni-table>
				</scroll-view>
			</view>	
			<view v-if="dataList.length == 0" style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 135px;">
				暂无数据
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import moment from '../../utils/moment.min.js'
	var that;
	export default {
		data() {
			return {
				dataListName: [] ,// 列表头
				dataList: [] ,// 列表
				sysInfo: null, // 系统变量
			}
		},
		onLoad(e) {
			that = this
			that.sysInfo = this.$sys.getSysInfo();
			that.getList()
		},
		methods: {
			getList(){
				that.dataListName = [
					{demo1:'化学品名',demo2:'物料编号',demo3:'申请量',demo4:'实际使用量',demo5:'申请日期',demo6:'使用人员',demo7:'单据编号',demo8:'审批状态'},
				]
				that.$http.get('material/useHead/getITcUseDetailList', {
					fuseuser: that.sysInfo.userId,
					fpointNo: that.sysInfo.labNo,
					froleid: that.sysInfo.froleid
				}).then(e => {
					console.log('e222',e)
					that.dataList = e.list
				}).catch(()=>{
					that.dataList = []
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style>
	.redColor{
		background-color: #ffd4d4 !important;
	}
	.itemColor{
		color: #D60000 !important;
	}
	.uni-table .uni-table-tr:nth-child(2) .uni-table-td:first-child{
		background-color: #fff !important;
	}
	.dateSty{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
		opacity: 0.6;
		margin-left: 12px;
	}
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: center;
		padding: 3px 0 12px 0;
	}
	
	.scroll {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
		}
		.scroll-box {
			padding: 24rpx;
			display: inline-block;
			width: 300rpx;
			height: 172rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4rpx 0px #ACACAC;
			border-radius: 8rpx;
			border: 1rpx solid #ACACAC;
		}
	
		.scroll-box:last-child {
			margin-right: 0;
		}
</style>
